<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        财务收入
                    </h2>
                </div>
            </template>
            <el-form :model="formInline">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item label="收入项目">
                            <el-select v-model="formInline.type" placeholder="请选择收入项目" clearable>
                                <el-option :label="item.name" :value="item.name" v-for="item in options"
                                    :key="item.objectId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">

                        <el-form-item label="学员姓名">
                            <el-select v-model="formInline.name" placeholder="不限学员" clearable>
                                <el-option :label="item" :value="item" v-for="item in Studata" :key="item" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider border-style="dashed" />
            <div class="btn-exp">
                <div>
                    <el-button type="success" @click="handleJump" color="#ff5722">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        日常收入</el-button>
                    <el-button type="warning" color="#1e9fff" @click="handleExp">
                        <el-icon>
                            <FolderOpened />
                        </el-icon>
                        收入导出
                    </el-button>
                </div>
                <div>
                    <span>
                    </span>
                    欠费
                </div>
            </div>
            <el-divider />

            <div class="sta-box1">
                <div>
                    <h2>
                        232400
                    </h2>
                    <p>总收费金额</p>
                </div>
                <div>
                    <h2>160871</h2>
                    <p>年收费金额</p>
                </div>
                <div>
                    <h2>24372</h2>
                    <p>本月收费金额</p>
                </div>
                <div>
                    <h2>1012</h2>
                    <p>本周收费金额</p>
                </div>
                <div>
                    <h2>1.2</h2>
                    <p>今日收费金额</p>
                </div>
            </div>


            <div class="btn-box">
                <el-button type="success" size="small" @click="handleMul" v-if="filterData.length">批量审核</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%"
                :header-cell-style="{ backgroundColor: '#fafafa', textAlign: 'center' }" border show-summary
                @selection-change="handleSelectionChange" ref="mytable" :cell-style="cellStyle">
                <el-table-column type="selection" width="100" />
                <el-table-column label="支出名称" prop="type" width="180" fixed="left" />
                <el-table-column label="学员名称" prop="name" width="180" />
                <el-table-column label="应收金额" prop="ReceivedMoney" width="180" />
                <el-table-column label="实收金额" prop="money" width="180" sortable>
                    <template #default="scope">
                        <div class="money-cont">{{ scope.row.money }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式">
                    <el-table-column label="微信" prop="wechat" width="100" />
                    <el-table-column label="支付宝" prop="alipay" width="100" />
                    <el-table-column label="现金" prop="cash" width="100" />
                    <el-table-column label="其他方式" prop="rests" width="100" />
                </el-table-column>
                <el-table-column label="欠费金额" prop="Arrearage" width="150">
                    <template #default="scope">
                        <div style="color: #ffb800;">
                            {{ scope.row.Arrearage }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="生成时间" prop="Expentime" width="200">
                    <template #default="scope">
                        <div v-if="scope.row.time">
                            {{ scope.row.time.slice(0, 10) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="收支状态" prop="state" width="180">
                    <template #default="scope">
                        <div :class="[scope.row.state == '已审核' ? 'color-box' : '']">
                            {{ scope.row.state }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="审核时间" prop="audit" width="200">
                    <template #default="scope">
                        <div v-if="scope.row.audit">
                            {{ scope.row.audit.slice(0, 10) }} {{ scope.row.audit.slice(11, 19) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="入账通道" width="200">
                    <template #default>
                        <div>前台办理</div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="descr" width="300" />
                <el-table-column label="操作" fixed="right" width="150">
                    <template #default="scope">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <el-button size="small">
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    功能</el-button>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="handleState(scope.row.objectId)"
                                        :disabled="scope.row.state == '已审核'">{{ scope.row.state == '已审核' ? '已审核' : '审核'
                                        }}</el-dropdown-item>

                                    <el-dropdown-item @click="handlePrint(scope.row)">打印</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无信息" />
                </template>
            </el-table>

            <el-dialog v-model="dialogFormVisible" draggable title="添加日常收入">
                <IncomeForm v-model="dialogFormVisible" />
            </el-dialog>

            <el-dialog draggable title="打印票据" v-model="dialogFormVisible1" class="print-box">
                <PrintForm :PrintData="PrintData" v-model="dialogFormVisible1" v-if="dialogFormVisible1" />
            </el-dialog>

            <div class="pagination" v-if="tableData.length">
                <el-pagination :page-sizes="[10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="10" />
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { IncomeDataGet } from '../../api/dapao-financial';
import { ExpenType } from '../../types/expenditure';
import { cloneDeep } from 'lodash';
import { IncomeGet, StateUpdate, StateBatch, StuIncomeGet } from '../../api/dapao-financial';
import { ElMessage, ElMessageBox } from 'element-plus';
import PrintForm from './components/print-form.vue'
import { handleDate } from '../../utils/tools';
import { useRouter } from 'vue-router';
import IncomeForm from './components/income-form.vue'
import { excelExport2 } from '../../utils/excel';
import { FinancialType } from '../../types/financial';
// import Vue3PrintNB from 'vue3-print-nb';
// 选择框
const options = ref<FinancialType[]>([])
let res = await IncomeGet()
options.value = res.data.results

const Stuoptions = ref<FinancialType[]>([])
let Stu = await StuIncomeGet()
Stuoptions.value = Stu.data.results
let Studata = computed(() => {
    let arr = [] as string[]
    Stuoptions.value.map(item => {
        if (!arr.includes(item.name)) {
            arr.push(item.name)
        }
    })
    return arr
})

// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(10)
// 控制
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)

// 控制弹窗
const handleJump = () => {
    dialogFormVisible.value = true
}

// 查询
const formInline = reactive({
    type: '',
    name: '',
})
const tableData = ref<ExpenType[]>([])
// 获取后端数据
let rs = await IncomeDataGet()
tableData.value = rs.data.results
total.value = rs.data.count

// 查询
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await IncomeDataGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}


// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await IncomeDataGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await IncomeDataGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}


const router = useRouter()
// 单个审核
const handleState = (id: string) => {
    ElMessageBox.confirm(
        '审核是否通过?',
        '用户审核',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {

            let obj = new Date()
            let audit = handleDate(obj)
            await StateUpdate(id, { state: '已审核', audit })
            router.go(0)
            ElMessage({
                type: 'success',
                message: '审核通过',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
// 批量审核
const stateData = ref<ExpenType[]>([])
const handleSelectionChange = (val: ExpenType[]) => {
    stateData.value = val
}

const filterData = computed(() => {
    let arr = stateData.value.map(item => item.objectId)
    return arr as string[]
})
const handleMul = async () => {
    let obj = new Date()
    let audit = handleDate(obj)
    await StateBatch(filterData.value, { state: '已审核', audit })
    ElMessage.success('批量操作成功')
    router.go(0)
}
let PrintData = reactive({}) as ExpenType
// 打印数据
const handlePrint = (val: ExpenType) => {
    // console.log(val);
    PrintData = val
    dialogFormVisible1.value = true
}

const handleExp = () => {
    excelExport2(tableData.value, {
        money: "收入金额/元",
        wechat: "微信支付/元",
        alipay: "支付宝支付/元",
        cash: "现金支付/元",
        rests: "其他支付",
        time: "支出时间",
        descr: "备注",
        Arrearage: "欠费金额",
        type: "支出名称",
        cardId: "身份证",
        phone: "电话号码",
        name: "学员名字",
    }, '收入明细表')
}


const cellStyle = ({ row }: { row: ExpenType }) => {
    if (row.Arrearage > 0) {
        return {
            color: "#666666",
            background: "#ffccc6",
            textAlign: "center",
        };
    }
    return {
        textAlign: "center",
    }
}
</script>

<style lang="scss">
div {
    color: #666;
}

.el-card {
    .el-card__header {
        >div {
            h2 {
                color: #666;
                font-weight: bold;
                padding-left: 15px;
                border-left: 4px solid #00aeff;
                margin-bottom: 10px;
            }
        }
    }

}


.pagination {
    margin-top: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.btn-box {
    padding: 10px 0 10px 10px;
    background-color: #f2f2f2;
}

.money-cont {
    color: #00aeff;
}

.color-box {
    color: green;
}

.el-table__footer {
    td {
        text-align: center;
    }

    .el-table__cell {
        text-align: center;
    }
}

.print-box {
    .el-dialog__header {
        padding-top: 10px;
    }

    .el-dialog__title {
        line-height: 42px;
        font-size: 14px;
        color: #333;
    }

    .el-dialog__body {
        padding: 50px;
        padding-top: 0;
        background-color: #f2f2f2;
    }
}

.btn-exp {
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div {
        >button {
            >span {
                color: white;
            }
        }
    }

    >div:nth-of-type(2) {
        width: 300px;
        display: flex;
        align-items: center;
        color: #666;
        font-size: 14px;
        >span {
            margin-right: 10px;
            height: 20px;
            width: 20px;
            background-color: #ffccc6;
        }
    }

}

.sta-box1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    >div {
        width: calc(100%/5 - 10px);
        height: 132px;
        border-radius: 1px;
        border: #f5f5f5 1px solid;
        background-color: #f5f5f5;
        text-align: center;
        display: flex;
        flex-direction: column;

        >h2 {
            margin-top: 25px;
            font-size: 32px;
            color: #11ace5;
            line-height: 50px;
        }

        >p {
            font-size: 12px;
            color: #666;
            line-height: 24px;
        }
    }


}
</style>